<template>
    <view>
        <view style="height: 320upx" class="bigbox" :style="{ backgroundColor: oaconfig.backgroundColor }">
            <view class="headBox" style=" background: url(../../static/oa/minebackground2.png) no-repeat;">
                <view class="head" style="margin-top: 55upx">
                    <view class="profilephoto">
                        <text class="icons" :style="{
								color: oaconfig.backgroundColor,
								fontSize: oaconfig.Size20
							}">
                            {{ userInfo.empname | nameFilter }}
                        </text>
                    </view>
                    <view class="information" style="height: 98px;">
                        <view class="name" style="height:50px" :style="{ fontSize: oaconfig.Size14 }">
                            {{ $oacommon.timeSlot().theme }}
                        </view>
                        <!-- <view class="company" style="height:40px" :style="{ fontSize: oaconfig.Size14 }">
                            {{ userInfo.orgname}}
                        </view> -->
                        <view class="company" style="height:63px" :style="{ fontSize: oaconfig.Size13 }">
                            {{ $oacommon.timeSlot().Hellogreetings }}
                        </view>
                    </view>
                    <view class="icon">
                        <!-- <text class="icons iconfont icon-you"></text> -->
                    </view>
                </view>
             <view class="InvoiceForm">
                    <view class="Invoice" @tap="invoiceTitle">
                        <image class="image" src="../../static/img/per.png"></image>
                        <text class="text" :style="{ fontSize: oaconfig.Size15 }">{{parentorgname}} <text style="padding: 0 10rpx;">-</text> {{orgname}}</text>
                    </view>
                </view>
            </view>
            <view class="bending" :style="{ backgroundColor: oaconfig.backgroundColor}"></view>
        </view>
        <view class="mains">
           <view class="billbox" @tap="navigateToPersonal(0)" style="margin-bottom: 10upx">
               <view class="imagetext">
                   <view style="width: 50upx; height: 50upx;" class="flex align-center">
                       <image style="width: 50upx; height: 50upx" src="../../static/oa/mySvg/xttz.svg"></image>
                   </view>
               </view>
               <view class="name" :style="{ fontSize: oaconfig.Size14 }">系统公告</view>
               <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
               </view>
           </view>
		   <view class="billbox" style="margin-bottom: 10upx" @tap="navigateToPersonal(6)">
		       <view class="imagetext">
		           <view style="width: 50upx; height: 50upx;" class="flex align-center">
		               <image style="width: 44upx; height: 44upx" src="../../static/img/user.png"></image>
		           </view>
		       </view>
		       <view class="name" :style="{ fontSize: oaconfig.Size14 }" @tap="navigateToPersonal(11)">个人信息</view>
		       <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
		       </view>
		   </view>
           <!-- <view class="billbox" style="margin-bottom: 10upx" @tap="navigateToPersonal(1)">
               <view class="imagetext">
                   <view style="width: 50upx; height: 50upx;" class="flex align-center">
                       <image style="width: 44upx; height: 44upx" src="../../static/oa/mySvg/clbz.svg"></image>
                   </view>
               </view>
               <view class="name" :style="{ fontSize: oaconfig.Size14 }">差旅标准</view>
               <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
               </view>
           </view> -->
           <!-- <view class="billbox" style="margin-bottom: 10upx" @tap="navigateToPersonal(2)">
               <view class="imagetext">
                   <view style="width: 50upx; height: 50upx;" class="flex align-center">
                       <image style="width: 44upx; height: 44upx" src="../../static/oa/mySvg/ysaq.svg"></image>
                   </view>
               </view>
               <view class="name" :style="{ fontSize: oaconfig.Size14 }">隐私安全</view>
               <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
               </view>
           </view>
           <view class="billbox" @tap="navigateToPersonal(3)" style="margin-bottom: 10upx">
               <view class="imagetext">
                   <view style="width: 50upx; height: 50upx">
                       <image style="width: 50upx; height: 50upx" src="../../static/oa/mySvg/wtdy.svg"></image>
                   </view>
               </view>
               <view class="name" :style="{ fontSize: oaconfig.Size14 }">问题答疑</view>
               <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
               </view>
           </view>
           <view class="billbox" style="margin-bottom: 10upx" @tap="navigateToPersonal(4)">
               <view class="imagetext">
                   <view style="width: 50upx; height: 50upx;" class="flex align-center">
                       <image style="width: 44upx; height: 44upx" src="../../static/oa/mySvg/yjfk.svg"></image>
                   </view>
               </view>
               <view class="name" :style="{ fontSize: oaconfig.Size14 }">意见反馈</view>
               <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
               </view>
           </view> -->
           <!-- <view class="billbox" @tap="navigateToPersonal(5)" style="margin-bottom: 10upx">
               <view class="imagetext">
                   <view style="width: 50upx; height: 50upx">
                       <image style="width: 50upx; height: 50upx" src="../../static/oa/mySvg/czsc.svg"></image>
                   </view>
               </view>
               <view class="name" :style="{ fontSize: oaconfig.Size14 }">操作手册</view>
               <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
               </view>
           </view> -->
          <!-- <view class="billbox" style="margin-bottom: 10upx" @tap="navigateToPersonal(6)">
               <view class="imagetext">
                   <view style="width: 50upx; height: 50upx;" class="flex align-center">
                       <image style="width: 44upx; height: 44upx" src="../../static/oa/mySvg/dlsz.svg"></image>
                   </view>
               </view>
               <view class="name" :style="{ fontSize: oaconfig.Size14 }">代理设置</view>
               <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
               </view>
           </view> -->
           <!--<view class="billbox" @tap="navigateToPersonal(7)" style="margin-bottom: 10upx">
               <view class="imagetext">
                   <view style="width: 50upx; height: 50upx">
                       <image style="width: 50upx; height: 50upx" src="../../static/oa/mySvg/xgmm.svg"></image>
                   </view>
               </view>
               <view class="name" :style="{ fontSize: oaconfig.Size14 }">手势密码</view>
               <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
               </view>
           </view>
             <view class="billbox" @tap="navigateToPersonal(8)" style="margin-bottom: 10upx">
                <view class="imagetext">
                    <view style="width: 50upx; height: 50upx">
                        <image style="width: 50upx; height: 50upx"
                            src="../../static/oa/mySvg/pf.svg"></image>
                    </view>
                </view>
                <view class="name" :style="{ fontSize: oaconfig.Size14 }">皮肤切换</view>
                <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
                </view>
            </view>

            <view class="billbox" style="margin-bottom: 10upx" @tap="navigateToMore">
                <view class="imagetext">
                    <view style="width: 50upx; height: 50upx">
                        <image style="width: 50upx; height: 50upx" src="../../static/oa/mySvg/gD.svg"></image>
                    </view>
                </view>
                <view class="name" :style="{ fontSize: oaconfig.Size14 }">更多应用</view>
                <view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text>
                </view>
            </view> -->
            <!-- 	<view class="billbox" style="margin-bottom: 10upx" @tap="clearStorage">
				<view class="imagetext">
					<view style="width: 50upx; height: 50upx"><image style="width: 50upx; height: 50upx" src="../../static/oa/del.png"></image></view>
				</view>
				<view class="name" :style="{ fontSize: oaconfig.Size14 }">清理缓存</view>
				<view class="icons" :style="{ fontSize: oaconfig.Size14 }"><text class="icons iconfont icon-you"></text></view>
			</view> -->

            <view class="billbox" style="display: flex; align-items: center; justify-content: center">
                <view class="items logout" @tap="logoutFn">
                    <text>退出登录</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        iconObject
    } from '../../commons/oa/svg.js'
    export default {
        data() {
            const sysInfo = uni.getSystemInfoSync();
            return {
                svgData: iconObject,
                TENANCYID: this.$oaconfig.lesseeCode, //租户ID
                oaconfig: {},
                userInfo: uni.getStorageSync("FRAMEWORK_USERINFO_KEY"),
                experienceLessee: false,
				orgname:'', //科室
				parentorgname:'' //部门
            };
        },

        filters: {
            nameFilter(name) {
                if (name) {
                    return name.substring(0, 1);
                }
                return '';
            }
        },
        computed: {},
        onLoad() {
			console.log(this.$oaconfig.userData)
			this.orgname = this.$oaconfig.userData.orgname
			this.parentorgname = this.$oaconfig.userData.parentorgname
            let TENANCY_ID;
            uni.getStorage({
                key: 'TENANCY_ID',
                success: function(res) {
                    TENANCY_ID = res.data;
                }
            });
            this.TENANCYID = TENANCY_ID; //租户ID
            this.$oacommon.getTenancyID(this);
            this.oaconfig = this.$oaconfig;
            //判断是否时用户体验中心进来的
            if (this.$oaconfig.lesseeCode == '11b805c8e089409ca853ebba08ffbb00') {
                this.$nextTick(function() {
                    this.experienceLessee = true
                })
            } else {
                // document.getElementsByClassName('uni-tabbar__item')[2].classList.add('hide-oa-lodding');
            }
        },
        onShow() {
            let _this = this;
            //设置标题头
            // uni.setNavigationBarTitle({
            //     title: '个人中心'
            // });
        },

        methods: {
            clearStorage() {
                uni.showModal({
                    title: '提示',
                    content: '您确定要清除本地缓存并重新登录吗？',
                    success: function(res) {
                        if (res.confirm) {
                            uni.clearStorage();
                            uni.clearStorageSync();
                            location.reload(true);
                            uni.reLaunch({
                                url: '/pages/oa/login/login'
                            });
                        }
                    }
                });
            },
            logoutFn() {
				let that= this;
                uni.showModal({
                    title: '提示',
                    content: '您确定要退出登录？',
                    confirmColor: that.$oaconfig.backgroundColor,
                    success: function(res) {
                        if (res.confirm) {
                            uni.removeStorageSync('FRAMEWORK_USERINFO_KEY'); //清除用户信息
                            uni.removeStorageSync('getappuserInfo'); //清除用户详情
							sessionStorage.removeItem("f2bpmAuthor");
							that.$store.state.token= "";
							uni.reLaunch({
								url: '../login/login'
							});
                        } else if (res.cancel) {}
                    }
                });
            },
            //个人中心
            personal() {
                uni.navigateTo({
                    url: './personaldetails'
                });
            },
            // 更多
            navigateToMore() {
                uni.navigateTo({
                    url: '../index/More'
                });
            },
            //抬头发票
            invoiceTitle() {
                uni.navigateTo({
                    url: '../riseparticulars/riseparticulars?num=0'
                });

                //this.$api.showTip('敬请期待...');
            },
            //
            ticketholder() {
                uni.navigateTo({
                    url: '../ticketHolder/ticketHolder'
                });
            },
            navigateToPersonal(numstate) {
                if(numstate==0){//系统通知
				   let rows = uni.getStorageSync('FRAMEWORK_USERINFO_KEY');
                   uni.navigateTo({
					   url: './notice?tenancyId='+rows.tenantList[0].tenancyId
                   })
                }else if(numstate==1){//差旅标准
                    uni.navigateTo({
                        url: './travelStandard'
                    })
                }else if(numstate==2){//隐私安全
                    uni.navigateTo({
                        url: './agreementView'
                    })
                }else if(numstate==3){//问题答疑
                    uni.navigateTo({
                        url: '../index/summaryQuestion'
                    })
                }else if(numstate==4){//意见反馈
                    uni.navigateTo({
                        url: './adviceFeedback'
                    })
                }else if(numstate==5){//操作手册
                    uni.navigateTo({
                        url: './operationManual'
                    })
                }else if(numstate==6){//代理设置
                    uni.navigateTo({
                        url: './agentProcess'
                    })
                }else if(numstate==7){//修改手势密码
                    /* uni.navigateTo({
                        url: '/pages/oa/login/forceResetPwd'
                    }); */
                    uni.navigateTo({
                        url: '../../components/uni-gesturePassword/gestureLock?type=3'
                    })
                }else if(numstate==11){//个人信息
                    uni.navigateTo({
                        url: './personal'
                    })
                }else if(numstate==8){//皮肤设置
                    uni.navigateTo({
                        url: './Fontskin'
                    });
                }else{
                    this.$api.showTip('敬请期待...');
                }

            }
        }
    };
</script>

<style lang="scss" scoped>
    page {
        // background-color: #ff;
    }

    .bigbox {
        // background: #229afc;
        position: relative;
    }

    .signout {
        border-radius: 0;
        border: 0;
        width: 100%;
        line-height: 100upx;
        background-color: #fff;
    }

    .signout::after {
        border-radius: 0;
        border: 0;
    }

    .bending {
        width: 100vw;
        height: 40upx;
        // background: #229afc;
        border-bottom-left-radius: 100% 40px;
        border-bottom-right-radius: 100% 40px;
        position: absolute;
        z-index: 0;
        bottom: -36upx;
    }

    .headBox {
        //   position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
        -webkit-box-pack: justify;
        justify-content: space-between;
        box-sizing: border-box;
        z-index: 998;
        transition-property: all;
        height: auto;
        // height: 200px;
        padding: 7px 3px;
        flex-direction: column;

        .InvoiceForm {
            position: relative;
            display: flex;
            align-items: center;
            height: 130upx;
            width: 690upx;
            margin: 40upx 0;
            background-color: #feffff;
            border-radius: 16upx;
            z-index: 2;

            .Invoice {
                display: flex;
                flex: 5;
                align-items: center;
                justify-content: flex-start;
                margin-left: 56upx;

                .image {
                    height: 50upx;
                    width: 50upx;
                }

                .text {
                    color: #666;
                    padding-left: 10upx;
                    font-weight: bold;
                }
            }

            .form {
                display: flex;
                flex: 5;
                align-items: center;
                justify-content: center;

                .image {
                    height: 50upx;
                    width: 50upx;
                }

                .text {
                    color: #666;
                    padding-left: 10upx;
                    font-weight: bold;
                }
            }
        }

        .head {
            width: 95%;
            height: 160upx;
            display: flex;

            .profilephoto {
                flex: 2;
                display: flex;
                justify-content: center;
                flex-direction: column;

                // align-items: center;
                .icons {
                    height: 140upx;
                    width: 140upx;
                    border-radius: 50%;
                    background-color: #fcfcfc;
                    line-height: 140upx;
                    text-align: center;
                }
            }

            .information {
                flex: 6;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                padding-left: 20upx;

                .name {
                    width: 100%;
                    font-size: 36upx;
                    font-weight: bold;
                    color: #fff;
                    display: flex;
                    align-items: center;
                }

                .company {
                    width: 100%;
                    font-size: 28upx;
                    color: #fff;
                    line-height: 45upx;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                }
            }

            .icon {
                flex: 1;
                display: flex;
                justify-content: center;
                flex-direction: column;
                // align-items: right;
                text-align: right;

                color: #fff;
                font-size: 40upx;
            }
        }
    }
	.logout {
		display: flex;
		width: 100%;
		padding: 20upx;
		font-size: 34upx;
		justify-content: center;
		color: #ef7422;
	}
    .mains {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 100upx;
        width: 100%;

        // padding-top: calc(var(--status-bar-height) + 450upx);
        // padding-top: calc(450upx + constant(safe-area-inset-top));
        // padding-top: calc(450upx + env(safe-area-inset-top));
        .billbox {
            width: 100%;
            height: 100upx;
            display: flex;
            background-color: #fff;

            // border-bottom: solid 1upx #ccc;
            .imagetext {
                flex: 1.5;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;

                .icons {
                    width: 70upx;
                    height: 70upx;
                    font-size: 44upx;
                    color: #2487f7;
                }

                image {
                    width: 40upx !important;
                    height: 40upx !important;
                }
            }

            .name {
                margin-left: -20upx;
                flex: 8.5;
                text-align: left;
                line-height: 100upx;
                color: #666;
            }

            .icons {
                flex: 1;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                color: #999;
            }
        }
    }
	.orging{
		margin-top: 40rpx;
		
	}
</style>
